<template>
    <div class="box">
        <div class="logo">
            <img src="../../assets/image/01.png" alt="">
        </div>
        <div class="title med">
            A.R.T会员中心
        </div>
        <div class="common_input med">
            <input type="number" placeholder="输入手机号" maxlength="13"  v-model="mobile"/>
        </div>
        <div class="common_input med checkcode">
            <input type="text" placeholder="输入验证码" maxlength="6" v-model="sms"/>
            <div class="getcode ado">
                {{smstext}}
            </div>
        </div>
        <div class="tips med">
            若您未注册，登录时将自动注册且代表您已同意<router-link to="/agreement/privacy">《A.R.T隐私协议》</router-link>及<router-link to="/agreement/user">《A.R.T用户注册协议》</router-link>
        </div>
        <div class="btn med" @click="getsms">
            登录
        </div>
    </div>
</template>

<script>
import Vue from "vue";
import HTTP from "../../utils/http";
import { Toast } from "vant";
import "vant/lib/toast/style";
Vue.use(Toast);
export default {
  name: "login",
  data() {
    return {
      smstext: "获取验证码",
      number: 120,
      mobile: "",
      sms: ""
    };
  },
  methods: {
    getsms() {
      console.log(11111111111);
      Toast.loading({
        duration: 0,
        message: "登录中...",
        forbidClick: true
      });
      this.conunt();
      HTTP.Get("/artfurniture/user/info?openid=z0O2vtL2wWwynlgz61Gro", {
        mobile: this.mobile
      })
        .then(res => {
          console.log(res);
        })
        .catch(err => {
          // this.$message.error(res.err_msg);
        });
    },
    conunt() {
      if (this.number == 0) {
        this.smstext = "获取验证码";
        this.number = 120;
      } else {
        setTimeout(() => {
          this.number -= 1;
          this.smstext = this.number + "s";
          this.conunt();
        }, 1000);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
body {
  background: #ececec;
}
.box {
  height: 100%;
}
.med {
  font-family: "PingFang SC Medium";
}
.ado {
  font-family: "AdobeHeitiStd Regular";
}
.logo {
  width: 128px;
  height: 132px;
  margin: 72px auto 36px;
  img {
    display: block;
    width: 128px;
    height: 132px;
  }
}
.title {
  margin: 0 auto 108px;
  text-align: center;
  font-size: 22px;
  color: rgb(98, 98, 98);
}
.common_input {
  height: 54px;
  width: 690px;
  line-height: 50px;
  box-sizing: content-box;
  margin: auto;
  border-bottom: 2px solid #707070;
  position: relative;
  input {
    height: 50px;
    width: 690px;
    outline: none;
    background: #fff;
    border: none;
    font-size: 20px;
    color: rgb(98, 98, 98);
  }
  &.checkcode {
    margin-top: 60px;
    input {
      width: 500px;
    }
    .getcode {
      width: 150px;
      height: 40px;
      position: absolute;
      background: rgb(166, 5, 44);
      line-height: 40px;
      text-align: center;
      color: #fff;
      font-size: 20px;
      border-radius: 10px;
      right: 0;
      bottom: 15px;
    }
  }
}
.tips {
  line-height: 42px;
  width: 630px;
  color: rgb(98, 98, 98);
  margin: auto;
  font-size: 20px;
  a {
    color: rgb(166, 5, 44);
    font-size: 22px;
  }
}
.btn {
  width: 690px;
  height: 46px;
  background: rgb(166, 5, 44);
  line-height: 46px;
  color: #fff;
  text-align: center;
  margin: 70px auto;
  border-radius: 10px;
  font-size: 24px;
}
</style>
